*{padding: 0;margin: 0}
body,html{
	height: 100%;
	overflow: hidden;
	background: #333;
}
body{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	
}
.animate-box{
	flex:0 0 110px;
	margin: 50px auto;
}
// 1.方块反转 ： 设置景深，近大远小，先x轴翻转-180再Y轴翻转-180 
.square-flip{
	width: 40px;
	height: 40px;
	&-el{
		width: 100%;
		height: 100%;
		background: deepskyblue;
		animation: flip 1s infinite ease-out;
		
	}
}
@keyframes flip{
	0%{
		transform: perspective(240) rotateX(0) rotateY(0)
	}
	50%{
		transform: perspective(240) rotateX(-180deg) rotateY(0)
	}
	100%{
		transform: perspective(240) rotateX(-180deg) rotateY(-180deg)
	}
}

// 2.2圆缩放：先放到，再缩小，通过设置延迟，来设置动画的交错感
.circle-scale{
	position: relative;
	width: 40px;
	height: 40px;
	&-el{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		opacity: 0;
		background: deepskyblue;
		animation: circle-scale 1s infinite ease-in-out;
		&:last-child{
			animation-delay: -0.5s;
		}
	}
	
}
@keyframes circle-scale{
	0%{
		transform: scale(0)
	}
	50%{
		opacity: 0.5;
		transform: scale(1)
	}
	100%{
		transform: scale(0)
	}
}
// 水波动画
.wave{
	&-el{
		display: inline-block;
		width: 4px;
		height: 40px;
		background: deepskyblue;
		transform: scaleY(0.4);
		animation: wave 1s infinite ease-in-out;
		
		&:nth-of-type(1){
			animation-delay: -0.9s;
		}
		&:nth-of-type(2){
			animation-delay: -0.8s;
		}
		&:nth-of-type(3){
			animation-delay: -0.7s;
		}
		&:nth-of-type(4){
			animation-delay: -0.6s;
		}
		&:nth-of-type(5){
			animation-delay: -0.5s;
		}
	}
}
@keyframes wave{
	0%{
		transform: scaleY(0.4);
	}
	20%{
		transform: scaleY(1);
	}
	40%,60%,80%,100%{
		transform: scaleY(0.4);
	}
	
}


// 方块移动缩放动画
.square-move{
	position: relative;
	width: 40px;
	height: 40px;
	&-el{
		position: absolute;
		left: 0;
		top: 0;
		width: 10px;
		height: 10px;
		background: deepskyblue;
		transform:scale(0);
		animation:square-move 1.2s infinite ease-in-out;
			
		&:last-child{
			animation-delay: -0.6s;
		}
	}
}
@keyframes square-move{
	0%{
		transform:translateX(0px)
	}
	25%{
		
		transform:translateX(30px) scale(0.5) rotate(90deg)
	}
	49%{
		transform:translateX(30px) translateY(30px) scale(1) rotate(179deg)
	}
	50%{
		transform:translateX(30px) translateY(30px) scale(1) rotate(180deg)
	}

	75%{
		transform:translateX(0px) translateY(30px) scale(0.5) rotate(270deg)
	}
	100%{
		transform:translateX(0px) translateY(0px) scale(1) rotate(360deg)
	}
}

// 5-渐隐动画
.fadeout{
	width: 40px;
	height: 40px;
	&-el{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: deepskyblue;
		transform: scale(0);
		animation: fadeout 1s infinite ease-in-out;
	}
}

@keyframes fadeout{
	
	100%{
		transform: scale(1);
		opacity: 0;
	}
}
// 6-2圆旋转动画
.circle-spin{
	width: 40px;
	height: 40px;
	animation: circle-spin 2s infinite linear;
	&-el{
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: deepskyblue;
		animation: circle-spin-scale 2s infinite linear;
		&:last-child{
			animation-delay: -1s;
		}
	}
}
@keyframes circle-spin{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes circle-spin-scale{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1);
	}
	100%{
		transform: scale(0);
	}
}